<template>
<div class="chart">
  <content>
    <content-title>在线人数走势图</content-title>
    <content-block>
      <canvas v-el:onlinechart style="background-color:#ffffff;"></canvas>
    </content-block>
    <content-title>弹幕&礼物走势图</content-title>
    <content-block>
      <canvas v-el:contrastchart style="background-color:#ffffff;"></canvas>
    </content-block>
    <content-title>礼物分布图</content-title>
    <content-block>
      <canvas v-el:giftchart style="background-color:#ffffff;"></canvas>
    </content-block>
  </content>
</div>
</template>
<script>
import Chart from 'chart.js/src/chart'
export default {
  ready () {
    Chart.defaults.global.fullWidth = true
  },
  attached () {
    this.init(this.$route.params.platform, this.$route.params.id)
  },
  methods: {
    init: function (platform, roomId) {
      let key =platform.concat('_').concat(roomId)
      this.$RoomManage.getOnLineChart(key, (result) => {
        var onLineChart = new Chart(this.$els.onlinechart, result)
      })
      this.$RoomManage.getContrastChart(key, (result) => {
        var contrastChart = new Chart(this.$els.contrastchart, result)
      })
      this.$RoomManage.getGiftChart(key, (result) => {
        var giftChart = new Chart(this.$els.giftchart, result)
      })
    },
    back: function () {
      this.$router.go({name: 'home'})
    }
  }
}
</script>

<style lang="less">
.chart .content-block,.chart .content-title{
  max-width: 1200px;
  margin: 0px auto;
}
.chart .content-title{
  padding: 20px 10px;
}
</style>
